<template>
  <div class="backgd">
    <div class="clublists">
      <span>社团列表</span>
      <div class="myclub">
        我的社团:{{ state
        }}<button @click="exitclub" v-show="myinfoclub">
          退出社团
        </button>
      </div>

      <div class="listline"></div>
      <div class="listbox">
        <div
          class="clubs"
          v-for="club in clublist"
          :key="club.id"
          @click="select(club)"
        >
          <img :src="club.img" />
          <div class="clubname">{{ club.clubname }}</div>
        </div>
      </div>
    </div>
    <div class="selectclub">
      <img :src="selectclub.img" alt="" />
      <div class="selectname">{{ selectclub.clubname }}</div>
      <div class="selectinfo">
        社长：{{
          selectclub.name
        }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成立时间：{{
          selectclub.date
        }}
      </div>
      <button @click="joinclub">申请加入</button>
      <div class="selecttext">
        <p>
          {{ selectclub.content1 }}
        </p>
        <p>
          {{ selectclub.content2 }}
        </p>
        <p>
          {{ selectclub.content3 }}
        </p>
      </div>
    </div>
    <el-dialog title="入社申请" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="个人特长" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            placeholder=""
            v-model="form.self"
            maxlength="100"
            show-word-limit
            resize="none"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="申请理由" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder=""
            v-model="form.why"
            maxlength="160"
            show-word-limit
            resize="none"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exitjoin">取 消</el-button>
        <el-button type="primary" @click="agreejoin">确 定</el-button>
      </div>
    </el-dialog>
    <div v-if="shows">
      <img src="../../assets/club/wushu.jpg" alt="" />
      <img src="../../assets/club/qipan.jpg" alt="" />
      <img src="../../assets/club/jita.jpg" alt="" />
      <img src="../../assets/club/yumaoqiu.jpg" alt="" />
      <img src="../../assets/club/wudao.jpg" alt="" />
      <img src="../../assets/club/guoxue.jpg" alt="" />
      <img src="../../assets/club/dianjing.jpg" alt="" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { v4 as uuidv4 } from "uuid";
var dayjs = require("dayjs");
// import dayjs from 'dayjs' // ES 2015
dayjs().format();
export default {
  name: "ClubLists",
  data() {
    return {
      info: "",
      state: "",
      myinfo: "",
      myinfoclub: "",
      shows: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      clublist: [],
      selectclub: [
        {
          name: "",
          clubname: "",
          date: "",
          content: "",
        },
      ],
      form: {
        self: "",
        why: "",
      },
    };
  },
  mounted() {
    axios
      .get("http://127.0.0.1/clublist_yang/all")
      .then((res) => {
        this.clublist = res.data;
        this.selectclub = this.clublist[0];
        // console.log(this.clublist);
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
    axios
      .get("http://127.0.0.1/memberlist_yang/get", {
        params: {
          number: localStorage.getItem("student"),
        },
      })
      .then((res) => {
        // console.log(res.data[0]);
        if (res.data[0] !== []) {
          console.log(res.data[0]);
          if (res.data[0].club == "") {
            axios
              .get("http://127.0.0.1/joinclub_yang/get", {
                params: {
                  studentid: localStorage.getItem("student"),
                },
              })
              .then((res) => {
                // console.log(res,"111");
                for (const i in res.data) {
                  // console.log(res.data[i]);
                  if (res.data[i].new == "1") {
                    this.state = res.data[i].state;
                  }
                }
              })
              .catch((err) => {
                console.log("获取数据失败" + err);
              });
          }
          this.myinfo = res.data[0];
          this.myinfoclub = res.data[0].club;
          this.state = res.data[0].club
        }
      })
      .catch((err) => {
        console.log("获取数据失败" + err);
      });
  },
  methods: {
    exitclub() {
      //修改操作
      axios
        .get("http://127.0.0.1/memberlist_yang/update", {
          params: {
            id: this.myinfo.id,
            name: this.myinfo.name,
            class: this.myinfo.class,
            number: this.myinfo.number,
            password: this.myinfo.password,
            club: "",
          },
        })
        .then((res) => {
          console.log(res);
          this.myinfo = "";
          window.history.go(0);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },
    select(club) {
      // console.log(club);
      this.selectclub = club;
      console.log(this.selectclub);
    },
    joinclub() {
      if (localStorage.getItem("student")) {
        axios
          .get("http://127.0.0.1/memberlist_yang/get", {
            params: {
              number: localStorage.getItem("student"),
            },
          })
          .then((res) => {
            // console.log(res.data);
            this.info = res.data[0];
            if (res.data[0].club) {
              alert("每位同学只能申请一个社团");
              // console.log("拥有社团");
            } else {
              axios
                .get("http://127.0.0.1/joinclub_yang/get", {
                  params: {
                    studentid: localStorage.getItem("student"),
                  },
                })
                .then((res) => {
                  console.log(res,"q11");
                  if (res.data.length == 0) {
                    this.dialogFormVisible = true;
                  } else {
                    for (const i in res.data) {
                      if (res.data[i].new == "1") {
                        if (res.data[i].state == "待审核") {
                          alert("您已申请社团，请等待管理员审核");
                          return
                        } else if (res.data[i].state == "审核通过") {
                          this.dialogFormVisible = true;
                        }
                      }
                    }
                    this.dialogFormVisible = true;
                  }
                })
                .catch((err) => {
                  console.log("获取数据失败" + err);
                });
              // console.log("没有社团");
            }
          })
          .catch((err) => {
            console.log("获取数据失败" + err);
          });
      } else {
        alert("请先登录");
      }
    },
    exitjoin() {
      this.dialogFormVisible = false;
      this.form.self = "";
      this.form.why = "";
    },
    agreejoin() {
      if (this.form.self == "" || this.form.why == "") {
        alert("请输入个人特长和申请理由");
      } else {
        this.add();
        this.dialogFormVisible = false;
        this.form.self = "";
        this.form.why = "";
      }
    },
    add() {
      //添加操作
      var now = dayjs();
      // console.log(now);
      axios
        .get("http://127.0.0.1/joinclub_yang/get", {
          params: {
            studentid: localStorage.getItem("student"),
          },
        })
        .then((res) => {
          console.log(res, "111");
          for (const i in res.data) {
            console.log(res.data[i]);
            axios
              .get("http://127.0.0.1/joinclub_yang/update", {
                params: {
                  id: res.data[i].id,
                  student: res.data[i].student,
                  studentid: res.data[i].studentid,
                  club: res.data[i].club,
                  self: res.data[i].self,
                  why: res.data[i].why,
                  date: res.data[i].date,
                  state: res.data[i].state,
                  new: 0,
                },
              })
              .then(() => {
              })
              .catch((err) => {
                console.log("获取数据失败" + err);
              });
          }
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
      axios
        .get("http://127.0.0.1/joinclub_yang/add", {
          params: {
            id: uuidv4(),
            student: this.info.name,
            club: this.selectclub.clubname,
            self: this.form.self,
            why: this.form.why,
            date: now.$y + "-" + (now.$M + 1) + "-" + now.$D,
            state: "待审核",
            studentid: this.info.number,

            new: "1",
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
        window.history.go(0);
    },
  },
};
</script>

<style scoped>
.backgd {
  position: relative;
  width: 1320px;
  height: 1000px;
  margin: 20px 300px 0 300px;
  border: 0;
  /* background-color: #ddd; */
}
.clublists {
  /* position: absolute;
  top: 760px; */
  width: 1310px;
  height: 450px;
  border: 5px solid #158ff9;
  border-radius: 20px;
}
.clublists span {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 22px;
  font-weight: 700;
}
.myclub {
  position: absolute;
  top: 10px;
  right: 300px;
  font-size: 22px;
  font-weight: 700;
}
.myclub button {
  position: absolute;
  top: 5px;
  right: -80px;
}
.listline {
  position: absolute;
  top: 50px;
  height: 5px;
  background-color: skyblue;
  width: 1310px;
}
.listbox {
  position: absolute;
  top: 70px;
  left: 45px;
  width: 1220px;
  height: 360px;
}
.clubs {
  float: left;
  margin: 5px;
  height: 170px;
  border: 2px solid #158ff9;
  width: 189px;
}
.clubs img {
  height: 140px;
  width: 189px;
}
.clubs:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.clubname {
  height: 26px;
  width: 189px;
  background-color: white;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 26px;
}
.selectclub {
  position: relative;
  margin-top: 20px;
  height: 500px;
  width: 1310px;
  /* background-color: #213216; */
  border: 5px solid #158ff9;
  border-radius: 20px;
}
.selectclub img {
  position: absolute;
  top: 50px;
  left: 150px;
  height: 200px;
  width: 200px;
}
.selectname {
  position: absolute;
  font-size: 18px;
  top: 280px;
  left: 225px;
}
.selectinfo {
  position: absolute;
  font-size: 14px;
  top: 320px;
  left: 120px;
}
.selectclub button {
  position: absolute;
  top: 390px;
  left: 200px;
  height: 50px;
  width: 100px;
  font-size: 18px;
}
.selecttext {
  position: absolute;
  top: 100px;
  left: 550px;
  /* background-color: red; */
  height: 400px;
  width: 600px;
  text-indent: 2em;
}
</style>